<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Binding Cell Phone</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_fx9en0nm4fw.css">
    <link rel="stylesheet" href="../../css/shouye.css">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <style>
        main{
            width:100%;
            height:1785px;
            /* border:1px solid #e7e7e7; */
            margin-top:10px;
        }
        .m-right{
            width:100%;
            height:100%;
            /* border-left: 1px solid #e7e7e7; */
        }
        .m-right .top{
            border-bottom: 1px solid #e7e7e7;
            width:100%;
            overflow: hidden;
            position: relative;
        }
        .m-right h4,.m-right span{
            font:14px/47px "微软雅黑";
            font-weight: 500;
            text-indent: 1em;
            float: left;
        }
        .m-right span:nth-child(2){
            margin-left:10%;
            margin-top:10px;
        }
        .m-right span:nth-child(3){
            float: left;
            color:#f29642;
            font:14px/57px "微软雅黑";
            overflow: hidden;
            margin-top:5px;
        }
        .m-right .top b{
            width:8.462%;
            height:30px;
            background-color: #498e3d;
            color:#fff;
            text-align: center;
            font:14px/30px "宋体";
            float: left;
            border-radius: 7px;
        }
        .m-right b:nth-child(4){
            position: absolute;
            left:75%;
            top:50%;
            margin-top:-15px;
        }
        .m-right b:nth-child(5){
            position: absolute;
            left:88%;
            top:50%;
            margin-top:-15px;
            background: #999999;
            color: #fff;
        }
        .m-right ul{
            background:#f9f9f9;
            font:16px/38px "微软雅黑";
            color:#737373;
            font-weight: 400;
            text-indent: 1em;
        }
        .m-right .SI h3{
            background-color: #fff;
            font:16px/38px "微软雅黑";
            color:#498e3d;
            text-indent: 1em;
        }
        .AGG{
            margin-top:20px;
        }
        .AGG ul{
            background-color: #fff;
        }
        .AGG ul li{
            position: relative;
        }
        .AGG ul li:nth-child(1){
            background:#f2f2f2;
            font:16px/40px "微软雅黑";
        }
        .AGG ul li:nth-child(1) i{
            font-style: normal;
            margin-right:17.6%;
        }
        .AGG li:nth-child(2) b:nth-child(2),.AGG li:nth-child(3) b:nth-child(2),.AGG li:nth-child(4) b:nth-child(2){
            color:#999;
            font-weight: 300;
            font:12px/30px "微软雅黑";
            margin-left:-5%;
            position: absolute;
            left:12%;
            top:35px;
        }
        .AGG li:nth-child(2) em:nth-child(6),.AGG li:nth-child(3) em:nth-child(6),.AGG li:nth-child(4) em:nth-child(6){
            margin-right:13%;
        }
        .AGG li:nth-child(2) em:nth-child(5),.AGG li:nth-child(3) em:nth-child(5),.AGG li:nth-child(4) em:nth-child(5){
            margin-right:13%;
            margin-left:4%;
        }
        .AGG li:nth-child(2) em:nth-child(4),.AGG li:nth-child(3) em:nth-child(4),.AGG li:nth-child(4) em:nth-child(4){
            margin-right:11%;
            margin-left:4%;
        }
        .AGG li:nth-child(2) em:nth-child(3),.AGG li:nth-child(3) em:nth-child(3),.AGG li:nth-child(4) em:nth-child(3){
            margin-right:9%;
            margin-left:7%;
        }
        .AGG li:nth-child(2) b:nth-child(1) img{
            margin-top:15px;
        }
        .AGG li:nth-child(2) b:nth-child(1) img,.AGG li:nth-child(3) b:nth-child(1) img{
            margin-bottom:15px;
        }
        
        .AGG li em{
            font:12px/30px "微软雅黑";
            float: right;
            margin-top:35px;
        }
        .AGG em{
            margin-left:10%;
            margin-right:6%;
        }
        .bottom span:nth-child(1){
            margin-left:73%;
        }
        .bottom span:nth-child(2){
            margin:0px;
            color:#ff5757;
            font-size: 18px;
        }
        .bottom input{
            width:14.13%;
            height:42px;
            background-color: #999999;
            color:#fff;
            border-radius: 7px;
            border:0px;
        }
        .bottom input:nth-child(1){
            margin-left:67.31%;
            margin-right: 1.2%;
        }
        .bottom input:nth-child(2){
            background-color: #f29642;
        }
        .AGG ul li i:nth-child(5){
            margin-right:-5%;
        }
    </style>
</head>
<body>
    <main id="wrap">
        <div class="m-right">
            <div class="top">
                <h4>订单编号：15041305000006958388</h4>
                <span>订单状态：</span>
                <span>待付款</span>
                <b>立即支付</b>
                <b>取消订单</b>
            </div>
            <div class="PW">
                <ul>
                    <li>支付方式：支付宝</li>
                    <li>支付流水号：4643196467896166</li>
                    <li>下单时间：2016-04-04 16:13:38</li>
                    <li>支付时间</li>
                    <li>发货时间</li>
                    <li>收货时间</li>
                    <li>取消时间</li>
                    <li>申请退款时间</li>
                    <li>退款原因</li>
                    <li>退款时间</li>
                    <li>订单备注：希望包装得严实一点，不要有破损情况，谢谢</li>
                </ul>
            </div>
            <div class="SI">
                <h3>收货人信息</h3>
                <ul>
                    <li>收货人姓名：王敏敏</li>
                    <li>地址：24874684674678114</li>
                    <li>联系方式  手机：13647219834 / 固定电话：010-1234567</li>
                </ul>
            </div>
            <div class="SI">
                <h3>发票信息</h3>
                <ul>
                    <li>发票抬头：北京嘉禾影业有限公司</li>
                    <li>发票内容：明细</li>
                </ul>
            </div>
            <div class="SI">
                <h3>物流信息</h3>
                <ul>
                    <li>联系人：张小哥</li>
                    <li>联系方式：13995684562</li>
                </ul>
            </div>
            <div class="SI">
                <h3>卖家信息</h3>
                <ul>
                    <li>店铺名称：海澜之家旗舰店</li>
                    <li>真实姓名：赵敏之</li>
                    <li>联系电话：0512-25664952</li>
                </ul>
            </div>
            <div class="AGG">
                <ul>
                    <li>
                        <i>爱果果水果店</i>
                        <i>规格</i>
                        <i>单价</i>
                        <i>数量</i>
                        <i>金额</i>
                    </li>
                    <li>
                        <b>
                            <img src="../../img/img-JL/ly.png" alt="">
                        </b>
                        <b>云南省白石榴8个装</b>
                        <em>￥569</em>
                        <em>1</em>
                        <em>￥569</em>
                        <em>8个装</em>
                    </li>
                    <li>
                        <b>
                            <img src="../../img/img-JL/ly.png" alt="">
                        </b>
                        <b>云南省白石榴8个装</b>
                        <em>￥569</em>
                        <em>1</em>
                        <em>￥569</em>
                        <em>8个装</em>
                    </li>
                    <li>
                        <b>
                            <img src="../../img/img-JL/ly.png" alt="">
                        </b>
                        <b>云南省白石榴8个装</b>
                        <em>￥569</em>
                        <em>1</em>
                        <em>￥569</em>
                        <em>8个装</em>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <span>实付金额:</span>
                <span>￥2977</span>
                <form action="">
                    <input type="submit" value="取消订单">
                    <input type="submit" value="立即支付">
                </form>
            </div>
        </div>
    </main>
</body>
</html>